import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../actions/index'

class Approval extends Component {

    state = {
        flag: false
    }

    componentDidMount() {
        if (!this.props.list2 || !this.props.list2.length) {
            this.props.get_List2()
        }
    }

    pushBtn = () => {
        this.props.history('/approval')
    }

    clickBtn() {
        this.setState({
            flag: !this.state.flag
        })
    }

    render() {
        let { list2 } = this.props
        let { flag } = this.state
        return (
            <div className='Home'>
                <div className='Top'>
                    <div className='Top1'>
                        <button>添加成员</button>
                        <button>返回全部成员</button>
                        <button className={flag ? 'appear' : 'hide'}>批量处理</button>
                    </div>
                    <div className='Top2'>
                        <span>
                            <input type='checkbox' />
                        待审批
                    </span>
                        <span>
                            <input type='checkbox' />
                        已审批
                    </span>
                        <span>
                            <input type='checkbox' />
                        已过期
                    </span>
                    </div>
                </div>
                <table>
                <thead>
                    <tr style={{ height: '50px' }}>
                        <td><input type='checkbox' /></td>
                        <td>申请人</td>
                        <td>邮箱</td>
                        <td>手机号码</td>
                        <td>申请加入时间</td>
                        <td>审批时间</td>
                        <td>审批人</td>
                    </tr>
                </thead>
                <tbody>
                    {
                        list2 && list2.length ? list2.map((item, index) => {
                            return (
                                <tr key={index}>
                                    <td><input type='checkbox' checked={flag} onChange={
                                        this.clickBtn.bind(this)
                                    } /></td>
                                    <td>{item.name}</td>
                                    <td>{item.email}</td>
                                    <td>{item.tel}</td>
                                    <td>{item.date}</td>
                                    <td>{item.date2}</td>
                                    <td>{item.people}</td>
                                </tr>
                            )
                        }) : null
                    }
                </tbody>
            </table>
            </div>
        )
    }
}

let mapStateToProps = ({ dataReducer }) => {
    return {
        ...dataReducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Approval)